<template>
  <div class="home-body">
    <div class="home-container">
      <div class="top-banner"></div>
      <div class="home-content">
        <div class="home-menu">
          <router-link
            tag="div"
            v-for="menuItem in menuArr"
            :key="menuItem.id"
            class="menu-item"
            :to="menuItem.navi"
          >
            <p class="bg-img">
              <img class="menu-icon" :src="menuItem.avatar" />
            </p>
            <label>{{ menuItem.text }}</label>
          </router-link>
        </div>

        <resume-detail></resume-detail>
      </div>
    </div>
  </div>
</template>

<script>

import ResumeDetail from './detail/ResumeDetail'

export default {
  components: {
    ResumeDetail,
  },
  data() {
    
    return {
      menuArr: [
        { id: 0, avatar: require("../assets/my-resume.png"), text: "我的简历", navi: "/detail" },
        { id: 1, avatar: require("../assets/remen.png"), text: "热门岗位", navi: "/detail" },
        { id: 2, avatar: require("../assets/jingyan.png"), text: "求职经验", navi: "/detail" },
        { id: 3, avatar: require("../assets/account.png"), text: "我的账户", navi: "/detail" },
      ],
    };
  },

  methods: {
    gotoMenuNavi(naviPath) {
      this.$router.push(naviPath);
    },
  },
};
</script>

<style lang="scss">
.home-body {
  background-color: rgba(9, 22, 56, 1);
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;

  .home-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px;
    overflow-y: scroll;
    overflow-x: hidden;

    p {
      padding: 0;
      margin: 0;
    }

    .top-banner {
      height: 60px;
      width: 100%;
      margin-bottom: 30px;
    }

    .home-content {
      width: 70%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      background-color: #921d1d00;
    }

    .home-menu {
      background-color: #00000000;
      width: 120px;
      height: auto;
      color: #fff;

      .menu-item {
        width: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .bg-img {
        width: 70px;
        height: 70px;
        background-color: rgba(106, 120, 155, 0.8);
        border-radius: 50%;
        margin: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .menu-icon {
        width: 40px;
        height: 40px;
      }
    }

    .result-content {
      background: #fff;
      width: 100%;
    }
  }
}
</style>
